<template >
    <div :class="['dialog', show_dialog ? 'active' : '']">
       <div :style="dialog_content" class="content">
            <h3>{{title}}
                <span
                    class="close icon-close iconfont"
                    @click="show_dialog = false"
                 ></span>
            </h3>
           <div class="dialog_slot">
               <slot></slot>
           </div>

           <div class="dialog_footer">
               <span @click="cancel">取消</span>
               <span @click="submit" class="btn-primary">提交</span>
           </div>
       </div>
    </div>
</template>

<script>


    export default {
        name:"wk_dialog",
        data(){
            return{
                show_dialog:false
            }

        },
        props:['title','dialog_content'],
        created() {
        },
        methods:{
            show(){
                this.show_dialog=true;
            },
            cancel(){
                this.show_dialog=false;
                this.$emit('cancel')
            },
            submit(){
                this.show_dialog=false;
                this.$emit('submit')
            }
        }
    }

</script>

<style scoped  lang="less">
    @import "../assets/font/iconfont.css";
    .dialog {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 99999999;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
        display: none;
        opacity: 0;
        transition: opacity .3s .1s;
        justify-content: center;
        align-items: center;
        .content{
            z-index:999999999;
            overflow: auto;
            box-shadow:1px 1px 5px #000;
            background-color: #fff;
            border: 1px solid #999;
            border: 1px solid rgba(0,0,0,.3);
            *border: 1px solid #999;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            outline: 0;
            -webkit-box-shadow: 0 3px 7px rgba(0,0,0,.3);
            -moz-box-shadow: 0 3px 7px rgba(0,0,0,.3);
            box-shadow: 0 3px 7px rgba(0,0,0,.3);
            -webkit-background-clip: padding-box;
            position: relative;
            padding:3px 20px;
            background-clip: padding-box;
        }
        h3{color:#1e1e1e;font-size:16px;margin-top:12px;margin-bottom:10px;border-bottom:2px solid #ccc;line-height:2}
        .close {
            font-weight: 700;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .2;
            position: absolute;
            right: 3px;
            top:-5px;
            padding: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        &.active {
            display: flex;
            opacity: 1;
        }
    }

    .dialog_slot{margin-bottom:30px}
    .dialog_footer{
        position:absolute;bottom:10px;left:0;line-height:20px;
        width:100%;
        span{
            padding: 5px 10px;
            background: #eee;
            border: 1px solid #ddd;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            cursor: pointer;
            -webkit-transition: background 300ms ease-out;
            transition: background 300ms ease-out;
            text-align: center;
            width:80px;
            margin-right:30px;
            float: right;
            *display: inline;
            padding: 4px 12px;
            margin-bottom: 0;
            *margin-left: .3em;
            font-size: 14px;
            line-height: 20px;
            color: #333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255,255,255,.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            *background-color: #e6e6e6;
            background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
            background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
            background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
            background-image: -o-linear-gradient(top,#fff,#e6e6e6);
            background-image: linear-gradient(to bottom,#fff,#e6e6e6);
            background-repeat: repeat-x;
            border: 1px solid #bbb;
            *border: 0;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
            border-bottom-color: #a2a2a2;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            *zoom: 1;
            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);


        }
        .btn-primary{
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0,0,0,.25);
            background-color: #006dcc;
            *background-color: #04c;
            background-image: -moz-linear-gradient(top,#08c,#04c);
            background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
            background-image: -webkit-linear-gradient(top,#08c,#04c);
            background-image: -o-linear-gradient(top,#08c,#04c);
            background-image: linear-gradient(to bottom,#08c,#04c);
            background-repeat: repeat-x;
            border-color: #04c #04c #002a80;
            border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        }
    }

</style>
